<template>
    <div class="header">
        <h1>我是header</h1>
         <!-- 获取state的第一种方式：直接获取 -->
        <!-- <p>count的值是{{this.$store.state.count}}</p> -->
        <!-- 获取state的第二种方式：计算属性获取 -->
        <a href="###">count的值是{{count}}</a>
        <br/>
        <button @click="incrementWait">等一等再加1</button>
        <button @click="incrementNWait({n:8})">等一等再加n</button>
        <button @click="increment">累加</button>
        <button @click="decrement">累减</button>
        <button @click="incrementN({n:5})">每次累加n</button>
        <h2>电影总数是{{movieList.length}}</h2>


    </div>
</template>

<script>

import {mapState,mapMutations, mapActions} from "vuex"

export default {
    name:"Header",
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        ...mapState("count",["count","movieList"])
    },
    methods:{
        // 使用mutations方法的第一种方法
        // increment(){
        //     this.$store.commit("increment")
        // },
        // decrement(){
        //     this.$store.commit("decrement")
        // },
        // incrementN(){
        //     this.$store.commit("incrementN",{n:6})
        // }
        //使用mutations方法的第二种方式
        ...mapMutations("count",["increment","decrement","incrementN"]),
        ...mapActions("count",["incrementWait","incrementNWait"])

    }
  
}
</script>

<style>
.header{
    background-color: skyblue;
    text-align: center;
}
</style>